<template>
  <div class="main-container">
    <Table
      ref="tableRef"
      :choiceColumn="true"
      :defaultSort="defaultSort"
      :columns="columns"
      :apiUrl="apiUrl"
      :permission="permission"
      :formData="formData"
      :showPage="true"
      @openFormBefore="openFormBefore"
    >
      <template #toolIntro="{ row }">
        <div class="tool-intro">{{ row.toolIntro }}</div>
      </template>
      <template #toolLogo="{ row }">
        <el-image
          style="width: 100px; height: 100px; border-radius: 8px"
          :src="row.toolLogo"
          :zoom-rate="1.2"
          :z-index="9999"
          :preview-src-list="[row.toolLogo]"
          preview-teleported
          fit="cover"
        />
      </template>
      <template #toollabel="{ row }">
        <el-tag v-for="(item, index) in row.toollabel" :key="index">{{ item.labelName }}</el-tag>
      </template>
    </Table>
  </div>
</template>

<script setup name="Toolkit">
import Table from "@/components/Table";
import { getToolList, putTool, addTool, delTool, getTool } from "@/api/tool";
import { getLabelList } from "@/api/toolLabel";
const { proxy } = getCurrentInstance();

const tableRef = ref();
const defaultSort = ref({ prop: "createTime", order: "descending" });
const columns = [
  {
    prop: "id",
    label: "编号",
    width: 100,
    align: "center",
  },
  {
    prop: "toolName",
    label: "工具名称",
    align: "center",
  },
  {
    prop: "toolIntro",
    label: "简介",
    align: "center",
  },
  {
    prop: "toolLogo",
    label: "logo",
    align: "center",
  },
  {
    prop: "toollabel",
    label: "标签",
    align: "center",
  },
  {
    prop: "toolHref",
    label: "跳转链接",
    align: "center",
  },
  {
    prop: "toolSort",
    label: "排序",
    align: "center",
    sortable: "custom",
  },
  {
    prop: "createTime",
    label: "创建时间",
    align: "center",
    sortable: "custom",
  },
];
const menuList = ref([]);
const formData = reactive([
  {
    type: "input",
    label: "工具名称",
    placeholder: "请输入工具名称",
    prop: "toolName",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [
      { required: true, message: "请输入工具名称", trigger: "blur" },
      { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
    ],
  },
  {
    type: "input",
    label: "跳转链接",
    placeholder: "请输入跳转链接",
    prop: "toolHref",
    default: "",
    width: "70%",
    searchShow: false,
    rules: [{ required: true, message: "请输入跳转链接", trigger: "blur" }],
  },
  {
    type: "textarea",
    label: "简介",
    placeholder: "请输入简介",
    prop: "toolIntro",
    default: "",
    width: "70%",
    searchShow: false,
    rules: [{ required: true, message: "请输入简介", trigger: "blur" }],
  },
  {
    type: "number",
    label: "排序",
    placeholder: "请输入排序(从大到小)",
    prop: "toolSort",
    default: 1,
    width: "70%",
    searchShow: false,
    rules: [{ required: true, message: "请输入排序(从大到小)", trigger: "blur" }],
  },
  {
    type: "file",
    label: "Logo",
    placeholder: "请上传用户Logo",
    prop: "toolLogo",
    default: "",
    width: "70%",
    options: {
      cropper: { width: 400, height: 400 },
      preview: { width: 200, height: 200 },
      multiple: false,
      limit: 1,
      category: "toolLogo",
    },
    rules: [],
  },
  {
    type: "checkbox",
    label: "工具标签",
    placeholder: "请选择工具标签",
    prop: "toollabel",
    setAttr: { value: "id", label: "labelName" },
    options: [],
    default: [],
    width: "70%",
    searchShow: true,
    rules: [{ required: true, message: "请选择工具标签", trigger: "blur" }],
  },
  {
    type: "datetimerange",
    label: "创建时间",
    placeholder: ["筛选创建时间(开始点)", "创建时间(结束点)"],
    prop: "createTime",
    default: [],
    showRule: [],
    searchShow: true,
    width: "70%",
  },
]);

const apiUrl = {
  list: getToolList,
  edit: putTool,
  add: addTool,
  del: delTool,
  get: getTool,
};

const permission = {
  add: "admin:toolkit:add",
  edit: "admin:toolkit:edit",
  del: "admin:toolkit:del",
};

const getLabel = () => {
  getLabelList().then((res) => {
    if (res.code === 200) {
      formData[5].options = res.data.rows;
    }
  });
};
const openFormBefore = (formOption) => {
  formData[5].options = [];
  getLabel();
  if (formOption.hasOwnProperty("id")) {
    formOption.id = formOption.id;
    formOption.toollabel = formOption.toollabel.map((item) => {
      return item.id;
    });
  }
};
</script>

<style scoped lang="scss">
.tool-intro {
  @include eMore(3);
}
</style>
